﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

    <link href="@Url.Content("~/Content/DialogBox.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/CategoryList.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/galleriffic-basic.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/galleriffic-2.css")" rel="stylesheet" type="text/css" />
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/ie7.css")">
    <![endif]-->

    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>

<!--    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script> -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

    <script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.galleriffic.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.opacityrollover.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/StonePonyApp.js")" type="text/javascript"></script>
	<script type="text/javascript">
	    document.write('<style>.noscript { display: none; }</style>');
        
        jQuery(document).ready(function ($) {
	        $create(StonePonyApp.Manager, { 'id': 'StonePonyAppManager' });

	        // if user clicked on button, the overlay layer or the dialogbox, close the dialog 
	        //$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
	        $('a.button_Cancel').click(function () {
	            $('#dialog-overlay, #dialog-box').hide();
	            return false;
	        });

	        // We only want these styles applied when javascript is enabled
	        $('div.navigation').css({ 'width': '300px', 'float': 'left' });
	        $('div.content').css('display', 'block');

	        // Initially set opacity on thumbs and add
	        // additional styling for hover effect on thumbs
	        var onMouseOutOpacity = 0.67;
	        $('#thumbs ul.thumbs li').opacityrollover({
	            mouseOutOpacity: onMouseOutOpacity,
	            mouseOverOpacity: 1.0,
	            fadeSpeed: 'fast',
	            exemptionSelector: '.selected'
	        });
	        
            var gallerificThumbCount = $find('StonePonyAppManager').get_gallerificThumbCount();
	        // Initialize Advanced Galleriffic Gallery
	        var gallery = $('#thumbs').galleriffic({
	            delay: 2500,
	            numThumbs: gallerificThumbCount,        //27,
	            preloadAhead: 10,
	            enableTopPager: true,
	            enableBottomPager: false,
	            maxPagesToShow: 5,
	            imageContainerSel: '#slideshow',
	            controlsContainerSel: '#controls',
	            captionContainerSel: '#caption',
	            loadingContainerSel: '#loading',
	            renderSSControls: true,
	            renderNavControls: true,
	            playLinkText: 'Play Slideshow',
	            pauseLinkText: 'Pause',
	            prevLinkText: '&lsaquo; Previous',
	            nextLinkText: 'Next &rsaquo;',
	            nextPageLinkText: '&rsaquo;&rsaquo;',
	            prevPageLinkText: '&lsaquo;&lsaquo;',
	            enableHistory: false,
	            autoStart: false,
	            syncTransitions: true,
	            defaultTransitionDuration: 900,
	            onSlideChange: function (prevIndex, nextIndex) {
	                // 'this' refers to the gallery, which is an extension of $('#thumbs')
	                this.find('ul.thumbs').children()
					    .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					    .eq(nextIndex).fadeTo('fast', 1.0);
	            },
	            onPageTransitionOut: function (callback) {
	                this.fadeTo('fast', 0.0, callback);
	            },
	            onPageTransitionIn: function () {
	                this.fadeTo('fast', 1.0);
	            }
	        });
        });

        function CategoryImageClick(categoryLink) {
            if ($(categoryLink).hasClass('Selected'))    // You are on requested page
                return false;

            var clickedCategoryId = $(categoryLink).attr('data-id');
            var selectedCategoryId = $('div#categoryContainer div.categorySelector a.Selected').attr('data-id');
            if (selectedCategoryId == clickedCategoryId)
                return false;

            var manager = $find('StonePonyAppManager');
            var newUrl = window.location.pathname + "?categoryId=" + clickedCategoryId +
                         "&sessionId=" + manager.Get_CurrentSessionId();
            window.location.href = newUrl;
			
            return false;
        }

</script>


</head>
<body id="body">
@{
    string currentYear = DateTime.Now.ToString("yyyy");
    IEnumerable<StonePonyMVC.StonePony.Classes.CategoryImageDescriptor> categories = ViewBag.CategoryImages;
}
    <div class="page">
        <header>
            <div id="title">
                <img src="Images/logo_black.png" style="border: none;" alt="Stone Pony" />
            </div>
            <div id="categoryContainer">
@foreach (StonePonyMVC.StonePony.Classes.CategoryImageDescriptor x in categories)
{
                <a href="#play" class="categoryLink @x.ClassName" title="@x.CatName" data-id="@x.Cat"
                                onclick="return CategoryImageClick(this);">
                    <div class="categorySelector @x.ClassName">@x.CatName</div>
                </a>
}
            </div>
        </header>
        <section id="main">
            @RenderBody()
        </section>
    </div>
    <footer id="footer">
        <small><span>Copyright © @currentYear Stony Pony | All Rights Reserved</span></small>
    </footer>

</body>
</html>
